<template>
  <div>
    <p v-if="modules.length === 0">无未提交内容</p>
    <div v-if="modules.length > 0">
      <div class="module" v-for="module in modules" :key="module.id">
        <div class="module-header" @click="toggleModule(module.id)">
          <h3>{{ module.title }}</h3>
          <img class="arrow" :class="{'arrow-up': module.showContent, 'arrow-down': !module.showContent}" src="./箭头.png" alt="箭头">
        </div>
        <div v-if="module.showContent" class="module-content">
          <p>{{ module.description }}</p>
          <ul>
            <li v-for="resource in module.resources" :key="resource.id">
              <button @click="navigateToResource(resource.id)" class="resource-button">问卷</button>
              <span>{{ resource.title.replace('问卷', '') }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'SurveyNotSubmitted',
  data() {
    return {
      modules: [
        {
          id: 1,
          title: '第一章',
          description: '本单元主要训练顺序表，链表的基本操作，及线性表的基本应用。',
          resources: [
            { id: 1, title: '问卷 1-1 调查问卷调查问卷' }
            // 更多资源
          ],
          showContent: false
        },
        {
          id: 2,
          title: '第二章',
          description: '本单元主要训练树结构，二叉树的基本操作及应用。',
          resources: [
            { id: 1, title: '问卷 2-1 树结构问卷' },
            // 更多资源
          ],
          showContent: false
        },
        // 更多未提交模块数据
      ]
    };
  },
  methods: {
    fetchModules() {
      axios.get('/api/modules') // 替换为你的API端点
        .then(response => {
          this.modules = response.data;
        })
        .catch(error => {
          console.error('Error fetching modules:', error);
        });
    },
    toggleModule(id) {
      const module = this.modules.find(module => module.id === id);
      if (module) {
        module.showContent = !module.showContent;
      }
    },
    navigateToResource(resourceId) {
      this.$router.push(`/survey/${resourceId}`);
    }
  }
};
</script>

<style scoped>
.module {
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: left; /* Ensure left alignment */
  overflow: hidden; /* Ensure the background covers the entire module */
}

.module-header {
  background-color: #f1f4f9; /* 更浅的蓝色背景 */
  padding: 20px;
  cursor: pointer; /* Add cursor pointer to indicate clickability */
  position: relative; /* Ensure the arrow is positioned relative to the header */
  display: flex; /* Use flex to align items horizontally */
  justify-content: space-between; /* Space-out header and arrow */
  align-items: center; /* Vertically center items */
}

.module-header h3 {
  margin: 0;
  color: #007bff;
  text-align: left; /* Ensure left alignment */
}

.module .arrow {
  width: 18px;
  height: 10px;
  transition: transform 0.3s ease; /* Smooth transition for arrow rotation */
}

.module .arrow-up {
  transform: rotate(180deg); /* Rotate arrow when module is open */
}

.module-content {
  padding: 20px;
}

.module-content p {
  text-align: left; /* Ensure left alignment */
  margin: 0 0 10px 0; /* Add margin bottom */
  color: #333; /* Adjust color if needed */
  font-size: 18px; /* Smaller font size */
}

.module-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left; /* Ensure left alignment */
}

.module-content ul li {
  padding: 5px 0;
  text-align: left; /* Ensure left alignment */
  display: flex; /* Use flex to align title and button horizontally */
  align-items: center; /* Vertically center items */
}

.module-content ul li span {
  font-size: 12px; /* Smaller font size for resource titles */
}


.resource-button {
  background-color: #f0fcff; /* 浅蓝色背景 */
  color: #007bff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px; /* Add margin to separate button from title */
}

.resource-button:hover {
  background-color: #b2ebf2; /* Darker blue background color on hover */
}
</style>